<template>
	<div class="pdb_input">
		<div class="comment_detail whiteBg">
			<div class="comter_avatar"><img :src="couponComDetail.usrPicUrl"></div>
            <div class="comt_info">
                <div class="comt_tit comt_bot_border">
                    <span class="comt_date">{{couponComDetail.crtTime|endTime}}</span>
                    {{couponComDetail.usrName}}
                </div>
                <div class="comt_coupon" v-if="couponComDetail.couponName">
                    <div class="couponDiv" :class="{'coupon_yellow':couponComDetail.couponType=='cash','coupon_green':couponComDetail.couponType=='rebate','coupon_blue':couponComDetail.couponType=='voucher','coupon_orange':couponComDetail.couponType=='present','coupon_purple':couponComDetail.couponType=='ticket'}">
                        <div class="_num" :class="{'coupon_color_y':couponComDetail.couponType=='cash','coupon_color_g':couponComDetail.couponType=='rebate','coupon_color_b':couponComDetail.couponType=='voucher','coupon_color_o':couponComDetail.couponType=='present','coupon_color_p':couponComDetail.couponType=='purple'}">Coupon</div>
                        <div class="_num_price">
                            <coupon-num :num="couponComDetail.denomination" :type="couponComDetail.couponType"></coupon-num>
                        </div>
                        <div class="coupon_type">{{couponComDetail.couponType | couponTp}}</div>
                    </div>
                    <div class="comt_coupon_info">
                        <p class="comt_coupon_info_tit">{{couponComDetail.couponName}}</p>
                        <p class="comt_coupon_middle"><span><img v-if="couponComDetail.promAppro=='buy'" style="width: 1rem;height:1rem"  src="../../images/cashIcon.png"/></span>已出售 {{couponComDetail.couponSoldnum}} <span class="pad_l">已使用 {{couponComDetail.couponUsednum}}</span></p>
                        <p><span class="red1">{{couponComDetail.valuation}} </span>芸券</p>
                    </div>
                </div>
                <div class="comt_coupon" v-if="!couponComDetail.couponName">
                    <div class="comt_coupon_img"><img :src="couponComDetail.url"></div>
                    <div class="comt_coupon_info">
                        <p class="comt_coupon_info_tit"><span class="right color_red">￥{{couponComDetail.mchtPer||'0'}}/人</span><span class="comt_mcht_name">{{couponComDetail.mchtName}}</span></p>
                        <p class="comt_coupon_middle">{{couponComDetail.mchtTypeValue}} <span class="right">{{couponComDetail.mchtArea}}</span></p>

                    </div>
                </div>
                <div class="comt_text">
                	<p class="comment_detail_cont">
                		{{(couponComDetail.dsc||couponComDetail.comDsc)|comdeCode}}
                	</p>
                    <div class="comt_img clearfix" v-if="imgStrs!=''">
                        <span v-for="imgItem in imgStrs"  @click="previewImage(imgItem,imgStrs)"><img :src="imgItem"/></span>
                    </div>
                </div>
                <div class="comt_btn">
                    <!-- <span class="comt_btn_p">
                        <svg class="icon" aria-hidden="true">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dianzan"></use>
                        </svg>点赞</span> -->
                    <span @click="publishFocus()" v-if="selfState">
                        <svg class="icon" aria-hidden="true">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pinglun1"></use>
                        </svg>评论</span>
                </div>
            </div>
            <!-- <div class="praise_list">

                <i class="icon iconfont icon-dianzan"></i>
                <a><img src="../../images/user_avatar.png"></a>
                <a><img src="../../images/user_avatar.png"></a>
                <a><img src="../../images/user_avatar.png"></a>
            </div> -->
            <!-- 回复评论 -->
            <div class="reply_list">
                <div class="reply_cont">
                    <div v-for="item in commentList" @click="replyFocus(item)">
                    	<i class="icon iconfont icon-pinglun left"></i>
                        <div class="reply_item">
                            <div class="reply_person">
                            	<div class="responder"><img :src="item.usrPicUrl"></div>
                            	<span>{{item.usrName}}</span>回复<span v-if="item.replyUsrName!=item.usrName">{{item.replyUsrName}}</span><span class="right">{{item.crtTime|endTime}}</span>
                        	</div>
                            <p>{{item.dsc|comdeCode}}</p>
                        </div>
                    </div>

                </div>
            </div>
		</div>
		<!-- 评论框 -->
		<div class="comment_box" ref='commentBox'>
			<input id="inputId" ref='inputId' v-model="commentCont" @focus="inputFixed" @blur="inputBlur" class="left" type="text" placeholder="写点评论吧" />
			<span @click="publish()" class="comment_box_btn right">发表</span>
		</div>
	</div>
</template>
<script>
    import comments from '../../componentes/global/comments.vue'
    import getData from '../../service/getData.js'
    import getData2 from '../../service/getData2.js'
    import couponNum from '../../componentes/global/couponNum.vue'
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import { Toast,Indicator } from 'mint-ui'
    export default {
        components: {
						comments,
            couponNum
        },
        data(){
        	return{
        		commentCont:'',
        		commId:'',
        		comState:0,
                couponComDetail:'',
                shopComDetail:'',
                replyStyle:'',
                commentList:[],
                imgStrs:[],
                commentUsrd:'',
                yuanUsrd:'',
                pingState:false,
                selfState:true
        	}
        },
        created:function(){
					this.$emit('header-info', {
						title: '评论详情',
						isBack: true,
						isMessage: false
					})
            this.replyStyle=this.$route.query.replyStyle;
            this.commId=this.$route.query.commId;

        	this.comDetail();

        },
        computed:{
            ...mapState({
                userInfo:state => state.user.userInfo
            })
        },
        methods:{
            // 点评论聚焦
            publishFocus(){
                this.commId=this.$route.query.commId;
                this.commentUsrd=this.yuanUsrd;
                // document.getElementById('inputId').focus();
                this.$refs.inputId.focus();
                this.commentCont=''
                this.$refs.inputId.setAttribute("placeholder","写点评论吧");
            },
            // 点回复者评论聚焦
            replyFocus(item){
                this.commentCont='';
                this.commId=item.commId;
                this.commentUsrd=item.usrId;
                this.$refs.inputId.setAttribute("placeholder","回复"+item.usrName);
                this.$refs.inputId.focus();
                // document.getElementById("inputId").setAttribute("placeholder","2222");
            },
        	//发表
        	publish:function(e){
        		// console.log(this.$route.query.commId+'/'+new Date().format("YMMddhhmmss")+'/'+this.commentCont);

        		var me=this;
                if (me.commentCont=='') {
                    Toast({
                        message: '内容不能为空',
                        duration: 800
                    });
                    return;
                }
                if (me.commentUsrd==me.userInfo.usrId) {
                    Toast({
                        message: '不能回复自己',
                        duration: 800
                    });
                    return;
                }
                var baseComm=Base64.encode(me.commentCont);
        		getData2.commentReply({'method':'post',data:{commId:me.commId,dsc:baseComm}},me.userInfo.usrId).then(rep=>{
        			if(rep.respCode == '00'){
                        console.log('发表成功');
                        Toast({
                            message: '回复成功',
                            duration: 800
                        });
                        me.commentCont='';
                        me.commentUsrd=me.yuanUsrd;
                        this.$refs.inputId.setAttribute("placeholder","写点评论吧");
                        this.pingState=true;
                        this.comDetail();
        			}else{
                        Toast({
                            message: "超过字数限制",
                            duration: 800
                        });
                    }
        		})
        	},
        	//评论详情
        	comDetail:function(){
        		var me=this;
                // console.log(me.$route.query.replyStyle)
                if (!this.pingState) {
                  //  Indicator.open('加载中...');
									this.$store.commit('changeState', true)
                }

                if (me.replyStyle==0) {
                    // console.log(me.$route.query.commId)
                    getData2.couponCommentDetail({'method':'post'},me.$route.query.usrId,me.$route.query.commId).then(rep=>{
                        if(rep.respCode == '00'){
                            me.couponComDetail=rep.content;
                            me.commentList=rep.content.replyDsc;
                            me.yuanUsrd=rep.content.usrId;
                            me.commentUsrd=me.yuanUsrd;
                            if (me.userInfo.usrId==rep.content.usrId) {
                                this.selfState=false;
                            }else{
                                this.selfState=true
                            }
                            // console.log(me.commentUsrd)
                        }else{
                            Toast({
                                message: rep.errorInfo,
                                duration: 800
                            });
                        }
                    })
                }else if(me.replyStyle==1){
                    getData2.shopCommentDetail({'method':'post'},me.$route.query.commId,me.$route.query.mchtId).then(rep=>{
                        if(rep.respCode == '00'){
                            me.couponComDetail=rep.content;
                            me.commentList=rep.content.replyDsc;
                            me.yuanUsrd=rep.content.usrId;
                            if (me.userInfo.usrId==rep.content.usrId) {
                                this.selfState=false
                            }else{
                                this.selfState=true
                            }
                            me.commentUsrd=me.yuanUsrd;
                            me.imgStrs=rep.content.commPicUrl.split(",");

//                          me.imgStrs.length=me.imgStrs.length-1;
                        }
                        else{
                            Toast({
                                message: rep.errorInfo,
                                duration: 800
                            });
                        }
                    })
                }
        	},
            previewImage:function(id,items){
                let me = this;
                wx.previewImage({
                    current: id, // 当前显示图片的http链接
                    urls: items // 需要预览的图片http链接列表
                });
            },
            // input聚焦
            inputFixed:function(){
                let me=this;
                let inputEl=me.$refs.inputId;
                setTimeout(function(){
                    inputEl.scrollIntoView(false);
                    // console.log(inputEl)
                },100)
                if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
                    setTimeout(function(){
                        // console.log(document.body.scrollHeight)
                        window.scrollTo(0,document.body.scrollHeight);
                    },500)
                }
                // if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                //     console.log(navigator.userAgent);
                //     console.log(document.body.scrollHeight+inputEl.scrollHeight)
                //     setTimeout(function(){
                //         document.body.scrollTop = document.body.scrollHeight+inputEl.scrollHeight
                //     },200)
                //     // setTimeout(function(){
                //     //     me.$refs.commentBox.style.bottom=4.2+'rem'
                //     // },200)
                // }
            },
            //失焦
            inputBlur:function(){
                let me=this;
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

                }
            }

        }
    }
</script>
<style>
    .comt_img{margin:0 -0.4rem;}
    .comt_img span{float: left;width: 33.3%;height:6.5rem;margin: 0.4rem 0;padding:0 0.4rem;box-sizing: border-box;display: flex;overflow: hidden;align-items: center;align-content: center;}
    .comt_img span img{width: 100%;}
    .comt_coupon .comt_mcht_name {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        color: #666;
    }
</style>
